
<template>
  <div>
    <el-row>
      <el-col :span="24" style="height: 80vh">
        <CesiumMap ref="cesiumMap" :tileSet="tileSet"></CesiumMap>
      </el-col>
    </el-row>
  </div>
</template>


  
<script>
import CesiumMap from '../cesiumMap/index.vue'
let viewer = null;
export default {
  components: { CesiumMap },
  data() {
    return {
      tileSet: {

      }
    }
  },
  methods: {
    loadHeatmap: function () {

      const heatmap1 = new CesiumHeatmap(viewer, '/data/heatmap/example.geojson');

    },


  },
  setup() {
    return {
    };
  },

  created() {

  },
  mounted() {

    let script2 = document.createElement('script');
    script2.type = 'text/javascript';
    script2.src = '../lib/heatmap/heatmap.min.js';
    document.body.appendChild(script2);


    let script1 = document.createElement('script');
    script1.type = 'text/javascript';
    script1.src = '../lib/heatmap/CesiumHeatmap.js';
    document.body.appendChild(script1);


    viewer = this.$refs.cesiumMap.viewer;
    viewer.imageryLayers.removeAll();
    this.$refs.cesiumMap.loadTianditu();
    let that = this;
    setTimeout(function () {
      that.loadHeatmap();
    }, 2000);

  },
};
</script>
  
<style scoped></style>
  